<template>
  <view class="MoewTownView">
    <template v-if="taskList && taskList.length">
      <Hr-Pull-Load
        :is-allow-pull="false"
        :height="-1"
        :bottom-tips="pullConfig.bottomTips"
        :lower-threshold="pullConfig.lowerThreshold"
        @loadMore="pullConfig.loadMore"
      >
        <Task-Cells
          class="taskinfo-list"
          :list="taskList"
        />
      </Hr-Pull-Load>
    </template>
    <My-Abnor-Page v-else color="plain" type="collection" tip="暂无数据" />
  </view>
</template>

<script type="text/ecmascript-6">
import TaskCells from 'pages/TaskDetail/components/taskInfo/components/TaskCells';
import { listComment } from '@/api/task/taskDetail';
import getConfig from '@/server/getConfig';
import _ from 'lodash';
import { getUserAvatar } from '@/pages/TaskDetail/common';
import MyAbnorPage from '@/components/my-abnor-page/my-abnor-page';

export default {
  components: { TaskCells, MyAbnorPage },
  data() {
    return {
      taskList: [
        {
          contentType: 2,
          cardMsg: {
            time: '星期五 11:15:58',
            name: '周富贵（乡镇）',
            content: '这是项目名称最长十八个字符的长度否称最长十八个字符的长度否则…这是项目名称最长十八个字符的长度否称最长十八个字符的长度否则…',
            avatar: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg',
            photolist: [
              {
                img: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg'
              },
              {
                img: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3286061922,1160551693&fm=26&gp=0.jpg'
              },
              {
                img: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg'
              },
              {
                img: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg'
              },
              {
                img: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg'
              }
            ]
          }
        },
        {
          contentType: 2,
          cardMsg: {
            isHideBackWord: true,
            time: '星期五 11:15:58',
            name: '周富贵（乡镇）',
            content: '痛而不言，笑而不语。此乃人生境界也！',
            avatar: ''

          }
        },
        {
          contentType: 2,
          cardMsg: {
            isHideBackWord: true,
            time: '星期五 11:15:58',
            name: '周富贵（乡镇）',
            content: '痛而不言，笑而不语。此乃人生境界也！',
            avatar: ''

          }
        }
      ],

      pullConfig: {
        // 加载更多时的底部提示，‘nomore’：没有更多数据了；‘loading’：加载中...；‘more’：上拉加载更多；
        bottomTips: 'more',
        lowerThreshold: 10, // 距离组件底部多远时触发加载更多
        loadMore: this.loadMore
      },

      commentPageConfig: {
        pageType: 1,
        pageSize: 10,
        pageIndex: 0,
        isNextPage: true
      }
    };
  },

  created() {
    this.loadMore('init');
  },

  activated() {
    console.log(12);
  },

  methods: {
    // assign taskList
    async assignTaskList(data) {
      const cItem = {
        contentType: 2,
        cardMsg: {
          isHideBackWord: true,
          time: '',
          name: '',
          content: '',
          avatar: ''
        }
      };

      const userMap = { };
      const { data: { ApiUrl }} = await getConfig();
      data.forEach(item => {
        const c = _.cloneDeep(cItem);

        item.annexIds && item.annexIds.forEach(item => {
          item.img = ApiUrl + 'file/downloadById' + `?id=${item.id}&fileName=${item.originName}`;
        });
        c.cardMsg = {
          ...c.cardMsg,
          ...item
        };
        c.cardMsg.time = item.editTime;
        c.cardMsg.name = item.trueName;
        c.cardMsg.content = item.content;
        c.cardMsg.photolist = item.annexIds || [];
        userMap[item.editUser] = item;
        this.taskList.push(c);
      });

      for (const key in userMap) {
        const { avatarId: avatar, avatar: avatarId, editUser } = userMap[key];
        getUserAvatar({ avatar, avatarId }).then(img => {
          this.taskList.forEach(comment => {
            if (comment.contentType === 2 && comment.cardMsg.editUser === editUser) {
              comment.cardMsg.avatar = img;
            }
          });
        });
      }
    },

    getCommentList() {
      const { enterpriseGuid: enterpriseCode, taskGuid } = this.$route.query;

      const requestData = {
        ...this.commentPageConfig,
        taskGuid,
        enterpriseCode
      };
      return listComment(requestData);
    },

    loadMore(type) {
      if (type === 'init') {
        this.taskList = [];
      }
      if (this.pullConfig.bottomTips === 'loading' || this.pullConfig.bottomTips === 'nomore') {
        return;
      }
      this.pullConfig.bottomTips = 'loading';
      this.getCommentList().then(res => {
        if (res.success) {
          res.data && res.data.length && this.assignTaskList(res.data);
          this.commentPageConfig.isNextPage = this.commentPageConfig.pageIndex + 1 < Math.ceil(res.total / this.commentPageConfig.pageSize);
          this.commentPageConfig.pageIndex++;
        } else {
          this.commentPageConfig.isNextPage = false;
        }

        if (this.commentPageConfig.isNextPage) {
          this.pullConfig.bottomTips = 'more';
        } else {
          this.pullConfig.bottomTips = 'nomore';
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.MoewTownView {
  position: relative;
  height: 100vh;

  .taskinfo-list {
    position: relative;
    top: 10px;
    margin-bottom: 10px;
  }
}
</style>
